<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的探测</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
		<script>
			function showColor(o){
				o.style.color="red";
			}
			
			function show1(){
				alert("div被点击了");
			}
			function show2(){
				e=window.event||event;
				// e.preventDefault(); 
				alert("h1被点击了");
				//e.stopPropagation();
				return false;
				
			}
		</script>
	</head>
	<body>
		<!-- h1点击了,show1,show2都执行？谁先谁后？
		     先内部，再外部
		-->
		<div onclick="show1()" style="border:2px solid red">
			<h1 style="border:2px solid blue" onclick="show2()">教育改变生活</h1>
		</div>
		<div id="d" onmouseover="showColor(this)">
			sss
		</div>
	</body>
</html>